<template>
	<!--收料--- 内转联单详情 -->
	<view class="container">
		<topBar>联单详情</topBar>
		<scroll-view scroll-y class="scroll-y">
			<view class="cart-lines">
				<view class="cart-imgs line">
					<view class="left">
						<view class="title">
							<text>车辆照片</text>
						</view>
						<image class="img" :src="info.carImages && info.carImages[0]" mode="width"></image>
					</view>
				</view>
				<view class="cart-info">
					<view class="cart-info-content">
						<view class="cart-types">
							<Button2 class="btn" v-if="info.energyType">{{info.energyType}}</Button2>
							<Button2 class="btn" v-if="info.directory">{{info.directory}}</Button2>
							<Button2 class="btn danger">内转车</Button2>
						</view>
						<view class="cart-code">
							<view class="code-item">
								<input type="text" v-model="nowCartCode[0]" />
							</view>
							<view class="code-item">
								<input type="text" v-model="nowCartCode[1]" />
							</view>
							<view class="code-separator">
								·
							</view>
							<block v-for="(item,index) in nowCartCode" :key="index">
								<view class="code-item" v-if="index > 1">
									<input type="text" v-model="nowCartCode[index]" />
								</view>

							</block>

						</view>
						<view class="cart-type">
							新能源
						</view>
					</view>
				</view>
				<view class="line">
					<view class="title">
						运企名称
					</view>
					<view class="val">
						{{info.transportCompanyName}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						起点厂区
					</view>
					<view class="val">
						{{ getFieldArea(info.startingFieldArea)}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						起点名称
					</view>
					<view class="val">
						{{info.startingPlace}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						终点厂区
					</view>
					<view class="val">
						{{getFieldArea(info.terminusFieldArea)}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						终点名称
					</view>
					<view class="val">
						{{info.terminusPlace}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						<text>物料类型</text>
					</view>
					<view class="val" :class="info.rockName == null &&'no-check'">
						{{info.rockName}}

					</view>
				</view>
				<view class="cart-imgs line ">
					<view class="left">
						<view class="title">
							物料照片
						</view>
						<view class="upload-area">
							<block v-if="info.rockImages && info.rockImages.length">
								<view class="show-img">
									<view class="imgs">
										<image v-if="info.rockImages[0]" :src="info.rockImages[0]" mode="widthFix"
											class="img"></image>
										<image v-if="info.rockImages[1]" :src="info.rockImages[1]" mode="widthFix"
											class="img"></image>
									</view>
									<view class="moreImg" @click="isShowMoreImgs=true">
										点击查看更多
									</view>
								</view>

							</block>

						</view>
					</view>
				</view>
				<view class="line">
					<view class="title">
						<image src="/static/img/common/required.png" class="required-icon"></image>
						<text>是否满载</text>
					</view>
					<view class="val">
						<Button1 v-for="item in fullFlagList" :class="item.id != info.fullFlag && 'no-active-btn'"
							:key="item.id">
							<!--  @click="changeFullFlag(item.id)" -->
							{{item.name}}
						</Button1>
					</view>
				</view>
				<view class="line" v-if="info.fullFlag == 0">
					<view class="title">
						<text>扣方方量</text>
					</view>
					<view class="val deduction-amount">
						-
						<input class="amount-input" type="number" v-model="info.volumeReduce"
							placeholder-style="color:#EB4F51;" placeholder="请输入" />
						方
					</view>
				</view>
				<view class="line">
					<view class="title">
						<text>发料人</text>
					</view>
					<view class="val">
						{{info.senderName}}
					</view>
				</view>
				<view class="line">
					<view class="title">
						<text>发料时间</text>
					</view>
					<view class="val">
						{{info.sendTime}}
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 起点名称弹窗 -->
		<StartProjectPopup v-if="isShowStartProjectPopup" @saveStartProject="saveStartProject" />
		<!-- 终点名称弹窗 -->
		<StartProjectPopup v-if="isShowEndProjectPopup" isEnd @saveStartProject="saveEndProject" />
		<!-- 物料类型弹窗 -->
		<MaterialTypePopup v-if="isShowMaterialTypePopup" @saveMaterialType="saveMaterialType" />
		<!-- 预览图片 -->
		<PreviewImgs :img-list="info.rockImages" v-if="isShowMoreImgs" @closePreview="closeMoreImgs" />
		<BottomBtn @click="saveReceiving">签收确认</BottomBtn>
	</view>
</template>

<script setup lang="ts">
	import BottomBtn from '@/components/bottomBtn/bottomBtn.vue';
	import Button1 from '@/components/button1/button1.vue';
	import Button2 from '@/components/button2/button2.vue';
	import StartProjectPopup from '@/components/consumption/startProjectPopup/startProjectPopup.vue';
	import MaterialTypePopup from '@/components/consumption/materialTypePopup/materialTypePopup.vue'
	import PreviewImgs from '@/components/previewImgs/previewImgs.vue';
	import { computed, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import * as consumptionApi from '@/api/consumption/consumption.js';
	/* import { useConsumptionStore } from  '@/stroes';
	const consumptionStore = useConsumptionStore() */
	// 获取厂区
	const getFieldArea = computed(() => {
		return (id) => {
			let text = ''
			switch (Number(id)) {
				case 4:
					text = '原料区'
					break;
				case 5:
					text = '生产区'
					break;
				case 6:
					text = '成品区'
					break;

			}
			return text
		}
	})
	// 联单详情信息
	const info = ref({})
	onLoad((options) => {
		uni.showLoading({
			title: '正在加载中'
		});
		getDetail(options.id)
	})

	// 获取联单详情
	const getDetail = (id) => {
		consumptionApi.getReceivingDetail(id).then(res => {
			let data = res.data;
			// console.log('联单详情', data);
			uni.hideLoading()
			if (data.code == 0) {
				info.value = data.data
				// console.log(info.value, 'uuuuuuuuuu');
				// consumptionStore.info = data.data
			}
		})
	}
	// 车牌号
	const nowCartCode = computed(() => {
		if (info.value.carNumber) {
			return info.value.carNumber.split('')
		} else {
			return ['', '', '', '', '', '', '', '']
		}
	})
	// 当前起点名称
	const nowStartProject = ref(null)
	// 是否显示起点项目弹窗
	const isShowStartProjectPopup = ref(false)
	// 打开选择起点项目弹窗
	const showStartProjectPopup = () => {
		isShowStartProjectPopup.value = true
	}
	// 保存起点项目
	const saveStartProject = (item) => {
		if (item) {

			nowStartProject.value = item
		}
		isShowStartProjectPopup.value = false
	}

	// 当前终点名称
	const nowEndProject = ref(null)
	// 是否显示终点项目弹窗
	const isShowEndProjectPopup = ref(false)
	// 打开选择终点项目弹窗
	const showEndProjectPopup = () => {
		isShowEndProjectPopup.value = true
	}
	// 保存终点项目
	const saveEndProject = (item) => {
		if (item) {

			nowEndProject.value = item
		}
		isShowEndProjectPopup.value = false
	}
	// 当前物料类型
	const nowMaterialType = ref(null)
	// 是否显示物料类型弹窗
	const isShowMaterialTypePopup = ref(false)
	// 显示物料类型弹窗
	const showMaterialTypePopup = () => {
		isShowMaterialTypePopup.value = true
	}
	// 保存物料类型
	const saveMaterialType = (item) => {
		if (item) {

			nowMaterialType.value = item
		}
		isShowMaterialTypePopup.value = false
	}
	// 满载列表
	const fullFlagList = [{ name: '是', id: '1' }, { name: '否', id: '0' },]
	// 修改满载类型
	const changeFullFlag = (id) => {
		if (id == 1) {
			if (info.value.volumeReduce) {

				info.value.volumeReduce = 0
			}
		}
		info.value.fullFlag = id
	}

	// 是否显示更多图片
	const isShowMoreImgs = ref(false)

	// 关闭查看更多图片
	const closeMoreImgs = () => {
		isShowMoreImgs.value = false
	}
	// 保存新增收料
	const saveReceiving = () => {
		uni.navigateTo({
			url: '/pages/consumption/receivingConfirm/receivingConfirm'
		})
	}
</script>

<style scoped lang="scss">
	.scroll-y {
		margin: 32rpx 32rpx;
		// margin-top:;
		width: 686rpx;
		height: 1220rpx;
		font-size: 28rpx;
		color: $default-color;
		border-radius: 16rpx;
		background-color: #fff;
		overflow: hidden;

		.cart-info {
			padding: 18rpx;
			padding-left: 20rpx;

			.cart-types {
				.btn {
					margin-right: 8rpx;
				}
			}

			.cart-code {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 16rpx 0rpx;
				font-size: 40rpx;
				font-weight: bold;

				.code-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 68rpx;
					height: 80rpx;
					// line-height: 80rpx;
					text-align: center;
					background: #EFF6FE;
					border-radius: 8rpx;
					overflow: hidden;


				}
			}

			.cart-type {
				font-size: 24rpx;
				text-align: right;
				color: #55CDA8;
			}
		}

		.cart-lines {
			.cart-imgs {
				padding: 0rpx;
				display: flex;
				// border-bottom: 2rpx solid rgba(156, 159, 163, 0.1);

				.left {
					flex: 1;
					padding: 32rpx 0rpx 20rpx 24rpx;

					.title {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
					}

					.img {
						width: 100%;
						// height: 100%;
					}

					.upload-area {
						display: flex;
						font-size: 20rpx;
						color: $info-color;
						text-align: center;

						.upload-box {
							margin-right: 16rpx;

							.upload {
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								margin-bottom: 10rpx;
								width: 135rpx;
								height: 136rpx;
								font-size: 24rpx;
								color: $primary-color;
								border: 2rpx dashed #9C9FA3;
								border-radius: 8rpx;

								.icon {
									width: 40rpx;
									height: 40rpx;
								}
							}


						}
					}

					.show-img {

						.imgs {
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;

							.img {
								margin-right: 20rpx;
								width: 208rpx;
								height: 136rpx;
							}
						}

						.moreImg {
							text-align: left;
							font-size: 30rpx;
							color: $primary-color;
						}
					}
				}

				.upload-example {
					width: 200rpx;
					padding: 70rpx 20rpx 16rpx;
					box-shadow: -4rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
					box-sizing: border-box;

					.img {
						width: 160rpx;
						height: 160rpx;
					}

					.example-tip {
						// margin-top: 10rpx;
						font-size: 20rpx;
						color: $primary-color;
						text-align: center;

					}
				}
			}

			.line {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-top: 2rpx solid rgba(156, 159, 163, .1);
				border-bottom: 0rpx;

				.left {
					padding: 0;
				}

				.title {
					width: 30%;
					display: flex;
					align-items: center;

				}

				.val {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					// font-weight: bold;

					.amount-input {
						margin: 0rpx 20rpx;
						width: 100rpx;
						font-size: 28rpx;
					}


					&.deduction-amount {
						color: #EB4F51;
					}

					&.square {
						color: #EB4F51;
					}

					&.no-check {
						color: #989DA5;
					}
				}

			}


		}

		.btn {
			margin-left: 8rpx;

			&.no-active-btn {
				color: $info-color;
				background: rgba(46, 135, 255, 0.1);
			}
		}
	}
</style>